import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import Header from "../../../components/Header";
import apiOdoo from "../../../helpers/apiOdoo";
import { createSlug, getId } from "../../../helpers/slug";
import currencyFormat from "../../../helpers/currencyFormat";
import { LazyLoadImage } from "react-lazy-load-image-component";
import "react-lazy-load-image-component/src/effects/blur.css";
import ProductSlider from "../../../components/product/ProductSlider";

export async function getServerSideProps(context) {
  const { slug } = context.query;
  let product = await apiOdoo('GET', '/api/v1/product/' + getId(slug));
  if (product.length == 1) {
    product = product[0];
  }
  return {props: {product}};
}

export default function ProductDetail({product}) {
  const router = useRouter();
  const { slug } = router.query;
  const [selectedVariant, setSelectedVariant] = useState("");
  const [quantity, setQuantity] = useState("1");
  const [similarProducts, setSimilarProducts] = useState(null);
  const [activeVariant, setActiveVariant] = useState({
    id: product.id,
    code: product.code,
    price: product.lowest_price,
    stock: product.stock_total,
    weight: product.weight,
    attributes: '',
  });
  
  useEffect(() => {
    if (product.variants.length == 1) {
      setSelectedVariant(product.variants[0].id);
    }
  }, [product]);

  useEffect(() => {
    setSimilarProducts(null);
    const getSimilarProducts = async () => {
      const dataSimilarProducts = await apiOdoo('GET', `/api/v1/product/${getId(slug)}/similar?limit=20`);
      setSimilarProducts(dataSimilarProducts);
    }
    getSimilarProducts();
  }, [slug]);

  useEffect(() => {
    if (selectedVariant != '') {
      let newActiveVariant = product.variants.filter((variant) => {
        return variant.id == selectedVariant;
      });
  
      if (newActiveVariant.length == 1) {
        newActiveVariant = newActiveVariant[0];
        setActiveVariant({
          id: newActiveVariant.id,
          code: newActiveVariant.code,
          price: newActiveVariant.price,
          stock: newActiveVariant.stock,
          weight: newActiveVariant.weight,
          attributes: newActiveVariant.attributes.join(', '),
        });
      }
    }
  }, [selectedVariant, product]);

  let onchangeVariant = (e) => {
    setSelectedVariant(e.target.value);
    setQuantity("1");
  }

  let addToCart = () => {
    return true;
  }

  return (
    <>
      <Header title={`${product.name} - Indoteknik`}/>
      <main>

        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray-300 w-full h-[300px] object-contain object-center bg-white" />
        <div className="p-4 pb-10">
          <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
            {product.manufacture.name ?? '-'}
          </Link>
          <h1 className="mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>

          {product.variant_total > 1 && !selectedVariant ? (
            <p className="text-xs text-gray-800 mb-1">Harga mulai dari:</p>
          ) : ''}

          {product.lowest_price.discount_percentage > 0 ? (
            <div className="flex gap-x-1 items-center">
              <span className="badge-yellow">{activeVariant.price.discount_percentage}%</span>
              <p className="text-xs text-gray-800 line-through">{currencyFormat(activeVariant.price.price)}</p>
            </div>
          ) : ''} 

          {product.lowest_price.price > 0 ? (
            <p className="text-lg text-gray-900 font-semibold">{currencyFormat(activeVariant.price.price_discount)}</p>
          ) : (
            <p className="text-gray-800">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p>
          )}

          <div className="flex gap-x-2 mt-5">
            <div className="w-9/12">
              <label className="form-label">Pilih: <span className="text-gray-800">{product.variant_total} Varian</span></label>
              <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} >
                <option value="" disabled={selectedVariant != "" ? true : false}>Pilih Varian...</option>
                {product.variants.length > 1 ? (
                  product.variants.map((variant) => {
                    return (
                      <option key={variant.id} value={variant.id}>{variant.attributes.join(', ')}</option>
                    );
                  })
                ) : (
                  <option key={product.variants[0].id} value={product.variants[0].id}>{product.variants[0].name}</option>
                )}
              </select>
            </div>
            <div className="w-3/12">
              <label htmlFor="quantity" className="form-label">Jumlah</label>
              <input type="number" name="quantity" id="quantity" className="form-input text-center is-invalid" value={quantity} onChange={(e) => setQuantity(e.target.value)} />
            </div>
          </div>

          <div className="flex gap-x-2 mt-2">
            <button className="btn-light w-full" >+ Quotation</button>
            <button className="btn-yellow w-full" onClick={addToCart} disabled={(product.lowest_price.price == 0 ? true : false)}>+ Keranjang</button>
          </div>

          <div className="mt-10">
            <h2 className="font-bold mb-2">Detail Produk</h2>
            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
              <h3 className="text-gray-900">Jumlah Varian</h3>
              <p className="text-gray-800">{product.variant_total} Varian</p>
            </div>
            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
              <h3 className="text-gray-900">Nomor SKU</h3>
              <p className="text-gray-800" id="sku_number">SKU-{activeVariant.id}</p>
            </div>
            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
              <h3 className="text-gray-900">Part Number</h3>
              <p className="text-gray-800" id="part_number">{activeVariant.code}</p>
            </div>
            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
              <h3 className="text-gray-900">Stok</h3>
              <p className="text-gray-800" id="stock">
                {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'}
              </p>
            </div>
            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
              <h3 className="text-gray-900">Berat Barang</h3>
              <p className="text-gray-800" id="weight">{activeVariant.weight > 0 ? activeVariant.weight : '1'} KG</p>
            </div>
          </div>

          <div className="mt-10">
            <h2 className="font-bold mb-4">Deskripsi Produk</h2>
            <div className="text-gray-800 leading-7" dangerouslySetInnerHTML={{__html: (product.description.trim() != '' ? product.description.replaceAll(/<*b>/g, '') : 'Belum ada deskripsi produk.')}}></div>
          </div>

          <div className="mt-10">
            <h2 className="h1 mb-4">Produk Lainnya</h2>
            <ProductSlider products={similarProducts}/>
          </div>

        </div>
      </main>
    </>
  );
}